<template>
  <div class="page">
    <div class="page_top ai-margin-bottom ai-border-bottom">
      <div class="cont ai-margin-tb-sz  ai-margin-lr">
        <div class="cont_left">
          <el-input  size="small" v-model="formInline.id" placeholder="请输入工程师ID"  style="width: 200px;" class="filter-item"
                    @input="handleContent" @keyup.enter.native="onSubmit"/>
          <el-button size="small" class="filter-item" type="primary" icon="el-icon-search" @click="onSubmit">
            搜索
          </el-button>
          <el-button size="small" class="filter-item" style="margin-left: 5px;" type="primary" icon="el-icon-edit" @click="handleAddEngineer">
            添加
          </el-button>
        </div>
      </div>
    </div>
    <div class="page_bottom">
      <el-table  :data="tableData.slice((currpage - 1) * pageSizes, currpage * pageSizes)" border stripe style="width: 100%">
        <el-table-column prop="id" label="ID" min-width="80" align="center"></el-table-column>
        <el-table-column prop="name" label="名称" width="170" align="center"></el-table-column>
        <el-table-column prop="user_name" label="负责人" width="170" align="center"></el-table-column>
        <el-table-column prop="phone" label="联系电话" width="170" align="center"></el-table-column>
        <el-table-column prop="address" label="地址" align="center"></el-table-column>
        <el-table-column prop="number" label="车辆数量" align="center"></el-table-column>
        <el-table-column fixed="right" label="操作" width="200" align="center">
          <template slot-scope="scope">
            <el-button  size="mini" type="primary"  @click="handleEditor(scope.row)">修改信息</el-button>
            <el-button  size="mini" type="danger"  @click="handleDelete(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="pagination ai-margin-tb" style="text-align: center">
        <el-pagination
          background
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage1"
          :page-size="pageSizes"
          :page-sizes="sizes"
          layout="total, prev, pager, next"
          :total="tableData.length"
        ></el-pagination>
        <!-- , prev, pager, next -->
      </div>
    </div>
    <!--        弹出框-->
    <el-dialog :title="title" :visible.sync="dialogVisible" width="40%" :before-close="handleClose">
      <el-form ref="form" :rules="rules" :model="form" label-width="120px">
        <el-form-item label="编号" required prop="number">
          <el-input v-model="form.number" placeholder="请输入编号" type="number"></el-input>
          <span class="ai-font-size-mini ai-font-color-aaa">禁止以0开头，且数位必须6位以上比如：100001</span>
        </el-form-item>
        <!-- <el-form-item label="密码" required prop="password">
          <el-input v-model="form.password" placeholder="请输入密码" type="password"></el-input>
        </el-form-item> -->
        <el-form-item label="公司名称" required prop="name">
          <el-input v-model="form.name" placeholder="请输入公司名称"></el-input>
        </el-form-item>
        <el-form-item label="负责人姓名" required prop="job">
          <el-input v-model="form.user_name" placeholder="请输入负责人姓名"></el-input>
          <!-- <el-select v-model="form.job" placeholder="请选择">
            <el-option v-for="item in options" :key="item.id" :label="item.title" :value="item.title"></el-option>
          </el-select> -->
        </el-form-item>
        <el-form-item label="联系电话"  prop="phone" required>
          <el-input v-model="form.phone" placeholder="请输入联系电话" type="number"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer" >
                <el-button @click="dialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="handleSave('form')">{{dialogTitle}}</el-button>
            </span>
    </el-dialog>
  </div>
</template>

<script>
  import {addEngineer, deleteEngineerById, getEngineer, getEngineerById, updateEngineer} from "../../api/engineer";

  export default {
    name: "addEngineer",
    data(){
      const validateNumber = (rule, value, callback) => {
        let flag = /^[1-9]\d*$/;
        console.log(flag.test(value))
        if (!flag.test(value)){
          callback(new Error('禁止以0开头比如：100001'))
        }  else {
          callback()
        };
        if (value.length<6) {
          callback(new Error('数位必须6位以上比如：100001'))

        } else {
          callback()
        }
      }
      return{
        currentPage1: 1,
        currpage: 1,
        pageSizes: 10,
        sizes: [10, 20, 30],
        tableData: [
          {
            id: 1,
            name: "青中客运中心",
            user_name: "张丽逡",
            phone: "18375789580",
            address: '重庆市沙坪坝区',
            number: "25"
          },{
            id: 2,
            name: "青中客运中心A",
            user_name: "吴杰",
            phone: "18345612165",
            address: '重庆市两江新区',
            number: "32"
          },{
            id: 3,
            name: "青中客运中心C",
            user_name: "姜杰",
            phone: "18486954567",
            address: '重庆市沙坪坝区',
            number: "21"
          },{
            id: 1,
            name: "青中客运中心V",
            user_name: "张静",
            phone: "18423532420",
            address: '重庆市沙坪坝区',
            number: "25"
          },
        ],
        title:"添加工程师",
        dialogTitle:"添加工程师",
        dialogEngineer:true,
        dialogVisible: false,
        form:{
          number:"",
          password:"",
          name:"",
          job:"",
          phone:"",
        },
        rules:{
          // number:[
          //   {required: true, message: '请输入工程师工号', trigger: 'blur'},
          //   // { min: 6, max: 20, message: '长度在 6 到 20 个字符', trigger: 'blur' },
          //   {required: true, validator: validateNumber, trigger: 'blur'}
          // ],
          // password:[{ required: true, message: '请输入密码', trigger: 'blur' }],
          // name:[{ required: true, message: '请输入姓名', trigger: 'blur' }],
          // job:[{ required: true, message: '请输入工作', trigger: 'blur' }],
          // phone:[
          //   { required: true, message: '请输入电话号码', trigger: 'blur' },
          //   { required: true, pattern: /^((13|14|15|16|17|18)[0-9]{1}\d{8})|((166|199|198)[0-9]{1}\d{7})$/, message: '请输入正确的电话号码', trigger: 'blur' }
          // ],
        },
        editorID:"",
        input:"",
        formData:{},
        formInline:{
          id:""
        },
        options:[
          {
            id: 1,
            title: "高级工程师"
          },
          {
            id: 2,
            title: "中级工程师"
          },
          {
            id: 3,
            title: "初级工程师"
          }
        ]
      }
    },
    mounted(){
      // this.handleContent()
    },
    methods:{
      handleContent(){
        getEngineer()
          .then(rsp =>{
            console.log(rsp)
            this.tableData = rsp.result.data;
          })
          .catch(respond =>{

            console.log(respond)
          })
      },
      handleAddEngineer(){
        // this.dialogEngineer = true;
        this.dialogTitle = "添 加";
        this.title = "添加汽车公司";
        this.dialogVisible=true;
        this.form.number=""
        this.form.password=""
        this.form.name=""
        this.form.job=""
        this.form.phone=""
      },//添加

      /**
       * 编辑
       * @param row
       */
      handleEditor(row){
        // this.handleEngineerInformation(row.id)
        this.editorID = row.id;
        this.dialogEngineer = false;
        this.dialogTitle = "保 存";
        this.title = "修改公司信息";
        this.dialogVisible=true;
        this.formData = row;
      },

      /**
       * 获取工程师
       * @param id 工程师id
        */
      handleEngineerInformation(id){
        getEngineerById(id)
          .then(rsp =>{
            console.log(rsp)
            this.form = rsp.result
          })
          .catch(respond =>{
            console.log(respond)

          })
      },

      /**
       * 创建和更新工程师信息
       * @param form
       */
      handleSave(form){
        console.log(this.form)
        this.$refs[form].validate((valid) => {
          if (valid) {
            if (this.dialogEngineer){
              addEngineer(this.form)
                .then(rsp =>{
                  this.$message.success(rsp.msg);
                  this.handleContent();
                  this.dialogVisible = false;
                })
                .catch(respond =>{
                  this.$message.warning(respond.msg)
                })
            } else {
              updateEngineer(this.editorID,this.form)
                .then(rsp =>{
                  console.log(rsp)
                  this.$message.success(rsp.msg)
                  this.handleContent();
                  this.dialogVisible = false
                })
                .catch(respond =>{
                  console.log(respond)
                  this.$message.warning(respond.msg)

                })
            };
          }
          else {
            this.$message.warning("必填信息有误！")
          }
        })

      },
      /**
       * 搜索
       */
      onSubmit(){
        console.log(this.formInline.id)
        if (this.formInline.id === ''){
          this.$message.warning("请输入工程师ID")
        } else {
          getEngineerById(this.formInline.id)
            .then(rsp =>{
              console.log(rsp)
              this.tableData = []
              this.$message.success(rsp.msg)
              this.tableData.push(rsp.result)
            })
            .catch(respond =>{
              this.$message.warning(respond.msg)
              console.log(respond.result)
            })
        };
      },

      /**
       * 删除工程师
       * @param row
       */
      handleDelete(row){
        this.$confirm('此操作将永久删除该条记录, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          deleteEngineerById(row.id)
            .then(rsp =>{
              console.log(rsp)
              this.$message.success(rsp.msg)
              this.handleContent();
            })
            .catch(respond =>{

            })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });
        });
      },//删除
      handleSizeChange(val) {
        this.pageSizes = val;
      },
      handleCurrentChange(val) {
        this.currpage = val;
      },
      handleClose(done) {
        done();
      }
    }
  };
</script>

<style scoped lang="scss">
  .page{
    width: 95%;
    margin: 0 auto;
    .page_top{
      .cont{
        margin: 30px 0px;
        display: flex;
        flex-direction: row;
        .cont_left{
          flex: 1;
        }
        .cont_right{
          flex: 1;
          text-align: right;
        }
      }
    }
  }
</style>
